Angular একটি মডুলার এবং কম্পোনেন্ট ভিত্তিক ফ্রেমওয়ার্ক, যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Angular এর একটি অন্যতম শক্তিশালী বৈশিষ্ট্য হলো টেমপ্লেট এবং ডেটা বাইন্ডিং। এই ফিচারের মাধ্যমে HTML টেমপ্লেট এবং Angular এর কম্পোনেন্ট ক্লাসের মধ্যে তথ্যের আদান-প্রদান সহজ হয়ে যায়।

এই টিউটোরিয়ালে আমরা Angular এর টেমপ্লেট এবং ডেটা বাইন্ডিং এর বিভিন্ন ধরনের ব্যবহার দেখব, যা আপনাকে Angular অ্যাপ্লিকেশন তৈরির সময় সাহায্য করবে।

ডেটা বাইন্ডিং কি?

ডেটা বাইন্ডিং হল একটি প্রক্রিয়া যার মাধ্যমে Angular কম্পোনেন্ট ক্লাস এবং HTML টেমপ্লেটের মধ্যে তথ্যের আদান-প্রদান করা হয়। Angular এর ডেটা বাইন্ডিং মূলত ৪ ধরনের হয়:

1. One-way Data Binding (One-way binding):
   • Interpolation
   • Property Binding
   • Event Binding
2. Two-way Data Binding (Two-way binding):
   • ngModel

1. Interpolation (One-way data binding)

Interpolation ব্যবহার করে আপনি কম্পোনেন্টের ক্লাস থেকে টেমপ্লেটের মধ্যে ডেটা প্রবাহিত করতে পারেন। এটি সাধারণত {{ }} স্যিনট্যাক্স দিয়ে করা হয়।

উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Data Binding';
  description = 'This is an example of interpolation in Angular.';
}

এখানে, title এবং description কম্পোনেন্টের ক্লাসের ভেরিয়েবল, যা টেমপ্লেটের মধ্যে {{}} এর মাধ্যমে ইনপুট হচ্ছে।

2. Property Binding (One-way data binding)

Property Binding ব্যবহারের মাধ্যমে আপনি HTML ট্যাগের প্রপার্টি বা অ্যাট্রিবিউটকে কম্পোনেন্টের ক্লাস থেকে বাইন্ড করতে পারেন। এটি সাধারণত [] স্যিনট্যাক্স দিয়ে করা হয়।

উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <img [src]="imageUrl" alt="Angular Logo" />
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
}

এখানে, [src] অ্যাট্রিবিউটটি imageUrl ভেরিয়েবলের মানের সাথে বাইন্ড করা হয়েছে। ফলে, ইমেজের URL হিসেবে imageUrl এর মান ব্যবহার করা হবে।

3. Event Binding (One-way data binding)

Event Binding ব্যবহার করে আপনি Angular টেমপ্লেটে কোনো ইভেন্ট (যেমন ক্লিক, কিবোর্ড ইভেন্ট) হ্যান্ডল করতে পারেন। এটি সাধারণত () স্যিনট্যাক্স দিয়ে করা হয়।

উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="changeMessage()">Click Me</button>
    <p>{{ message }}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = 'Hello, Angular!';

  changeMessage() {
    this.message = 'You clicked the button!';
  }
}

এখানে, (click) ইভেন্ট ব্যবহার করা হয়েছে, যা বাটনে ক্লিক করলে changeMessage() ফাংশনকে কল করবে এবং message ভেরিয়েবলের মান পরিবর্তন হবে।

4. Two-way Data Binding

Two-way Data Binding এর মাধ্যমে আপনি HTML টেমপ্লেট এবং কম্পোনেন্টের ক্লাসের মধ্যে ডেটা উভয় দিকেই আদান-প্রদান করতে পারেন। Angular এ এটি ngModel ডিরেকটিভ দিয়ে করা হয়।

উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input [(ngModel)]="name" placeholder="Enter your name">
    <p>Hello, {{ name }}!</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '';
}

এখানে, [(ngModel)] দিয়ে two-way data binding করা হয়েছে। আপনি ইনপুট ফিল্ডে নাম লিখলে তা স্বয়ংক্রিয়ভাবে name ভেরিয়েবলে আপডেট হবে, এবং name ভেরিয়েবলের মানটি <p> ট্যাগে প্রদর্শিত হবে।

সারাংশ

Angular এর টেমপ্লেট এবং ডেটা বাইন্ডিং ব্যবহারের মাধ্যমে কম্পোনেন্ট এবং টেমপ্লেটের মধ্যে তথ্যের আদান-প্রদান অত্যন্ত সহজ হয়। Angular ৪টি প্রধান ধরনের ডেটা বাইন্ডিং সমর্থন করে:

1. Interpolation: একমুখী ডেটা প্রবাহ।
2. Property Binding: একমুখী ডেটা প্রবাহ এবং HTML অ্যাট্রিবিউট সেট করা।
3. Event Binding: ইউজারের ইভেন্ট হ্যান্ডলিং।
4. Two-way Binding: ডেটা উভয় দিকেই প্রবাহিত।

এই বৈশিষ্ট্যগুলো Angular অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভিটি এবং ইউজার-বান্ধব ফিচার তৈরি করতে সাহায্য করে।